<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 视图层 -->
        姓名(文本)：<input type="text" v-model="username">
        <br><br>
        性别(单选按钮)：
        <input name="sex" type="radio" value="boy" v-model="sex" />男
        <input name="sex" type="radio" value="girl" v-model="sex" />女
        <input name="sex" type="radio" value="boy-girl" v-model="sex" />变性人
        <br><br>
        技能(多选框)：
        <input type="checkbox" name="skills" value="java" v-model="skills">Java开发
        <input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
        <input type="checkbox" name="skills" value="python" v-model="skills">Python开发
        <br><br>
        城市(下拉框)：
        <select name="citys" v-model="mycity">
            <option :value="item.value" v-for="item in citys">{{ item.name }}</option>
        </select>
        <br><br>
        说明(多行文本)：<textarea cols="30" rows="5" v-model="inf"></textarea>
        <br><br>
        <button type="submit" @click="checkInf">提交</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: '#app',
        //数据层
        data: {
            username : '',
            sex : 'girl',
            skills : ['java','vue'],
            citys : [{
                name : '广东',
                value : 'gd'
            },{
                name : '广西',
                value : 'gx'
            },{
                name : '湖南',
                value : 'hn'
            },{
                name : '江西',
                value : 'jx'
            },{
                name : '江苏',
                value : 'js'
            }],
            mycity : 'hn',
            inf : ''
        },
        methods : {
            checkInf() {
                console.log('点击按钮了');
                //收集数据-发送ajax给后端
                let dataList = {
                    name : this.username,
                    sex : this.sex,
                    skills : this.skills,
                    mycity : this.mycity,
                    inf : this.inf
                }

                //发送ajax
                console.log(dataList)
            }
        }
    })
</script>

</html>